<template>
    <!-- <div class="fa-3x">
        <i class="item1 fas fa-spinner fa-spin"></i>
        <i class="fas fa-circle-notch fa-spin"></i>
        <i class="fas fa-sync fa-spin"></i>
        <i class="fas fa-cog fa-spin"></i>
        <i class="fas fa-spinner fa-pulse"></i>
        <i class="fas fa-stroopwafel fa-spin"></i>

    </div> -->

    <div class="box">
        <div class="content">
            <router-view></router-view>
        </div>
        <div class="bar">
            <div :class="['item',item.isActive?'is-active':'']" 
            v-for="item in list" :key="item.id" 
            @click="handler(item.id)"
            :to="item.to">
                <span :class="item.icon" class="item-icon"></span>
                <span>{{ item.label }}</span>
            </div>
        </div>
    </div>
</template>

<script setup>
import { nanoid } from 'nanoid';
import { ref } from 'vue';
import {useRouter} from 'vue-router'

const router = useRouter()

const list = ref([
    {
        id:nanoid(5),
        label:'购物车',
        icon:'fas fa-shopping-cart',
        to:'/shopping',
        isActive:false
    },
    {
        id:nanoid(5),
        label:'收 藏',
        to:'/collect',
        icon:'fas fa-star',
        isActive:false
    },
    {
        id:nanoid(5),
        label:'首 页',
        to:'/index',
        icon:'fas fa-home',
        isActive:false
    },
    {
        id:nanoid(5),
        label:'设 置',
        to:'/set',
        icon:'fas fa-cog',
        isActive:false
    },
    {
        id:nanoid(5),
        label:'我 的',
        to:'/mine',
        icon:'fas fa-address-book',
        isActive:false
    },
])
const handler = (id) =>{
    // list.value.find(item=>{
    //     item.isActive = item.id == id
    // })
    list.value.find(item=>{
        if(item.id == id){
            item.isActive = true
            router.push({path:`${item.to}`})
        } else {
            item.isActive = false
        }
    })
    // console.log(e.target.getAttribute('to'));
}

</script>

<style lang="scss" scoped>
.item1{
    color: green;
}
.box{
    width: 100%;
    height: 100vh;
    border: 1px solid grey;
}
.bar{
    position: fixed;
    bottom: 0;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    width: 100%;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
    border: 1px solid grey;
}

.is-active{
    color: blue;
}
.item{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 15px;
    &-icon{
        font-size: 25px;
        margin-bottom: 3px;
    }
}


</style>